
import MenuItem from './MenuItem';
import SubMenu from './SubMenu';
export default class Menus extends React.Component {
    constructor(props) {
        super(props);
    }
    componentWillReceiveProps(nextProps) {
        if (this.props.templateKey !== nextProps.templateKey) {
            this.update(nextProps);
        }
    }
    render() {
        const { left, top, visible, onClickNumber, onClick, menus = [], onChangeNumber, workArea } = this.props;
        const filterMenus = menus.filter(d => d.workArea.indexOf(workArea) > -1).map(d => {
            return {
                ...d,
                children: (d.children || []).filter(f => f.workArea.indexOf(workArea) > -1)
            }
        });
        return (
            <div className="edc-excel-menus" style={{ left, top, width: 200, display: visible ? 'inline' : 'none' }} ref={ref => this.menu = ref}>
                <div className="edc-excel-menus-back">
                </div>
                <ul>
                    {filterMenus.map(({ key, children = [], ...menu }) => (
                        children.length > 0 ?
                            <SubMenu ecId={`${this && this.props && this.props.ecId || ''}_SubMenu@26cy70@${key}`} {...menu} dataKey={key} menus={children} onClick={onClick} onClickNumber={onClickNumber} onChangeNumber={onChangeNumber} /> :
                            <MenuItem ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@ppexkx@${key}`} {...menu} dataKey={key} onClick={onClick} onClickNumber={onClickNumber} onChangeNumber={onChangeNumber}></MenuItem>
                    ))}

                </ul>
            </div>
        )
    }
}